<head>
    <meta charset="UTF-8">
    <title>自动化合并工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 14px;
            margin: 0 20px 20px 20px;
            /*text-align: center;*/
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border-radius: 20px;
            display: inline-block;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /*margin-bottom: 30px;*/
        }
        form {
            max-width: 80%; /* 让表单占浏览器宽度的 80% */
            min-width: 45%;
            margin: 0 auto;
            padding: 30px;
            border: 1px solid #ddd;
            border-radius: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            justify-items: center;
        }
        .form-group {
            width: 100%;
        }
        /* 让指定字段独占一行 */
        .wide-field {
            grid-column: span 2;
        }

        label {
            position: relative;
            display: inline-block;
            margin-bottom: 5px;
            text-align: left;
        }
        input, select {
            font-size: 14px;
            width: 100%;
            padding: 12px;
            margin-top: 5px;
            border-radius: 10px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
        button {
            font-size: 14px;
            padding: 12px 25px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        .btn-container {
            grid-column: span 2;
            display: flex;
            justify-content: space-evenly;
            width: 100%;
        }
        .branch-group {
            display: flex;
            gap: 10px;
        }
        .branch-group select {
            flex-grow: 1;
        }

        .required {
            color: red;
        }

        /* 设置问号样式 */
        .tooltip {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #ccc;
            border-radius: 50%;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
            margin-left: 5px;
        }

        /* 设置提示信息样式，默认隐藏 */
        .tooltipText {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #333;
            color: #fff;
            padding: 5px;
            border-radius: 3px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
            white-space: nowrap;
        }

        /* 鼠标悬停在问号上时显示提示信息 */
        .tooltip:hover + .tooltipText {
            opacity: 1;
            visibility: visible;
        }

        /* 添加加载遮罩层样式 */
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        /* 添加加载动画样式 */
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    
</head>
<body>
    <h1>自动化合并工具</h1>
    <!-- 添加加载遮罩层 -->
    <div class="loading-overlay">
        <div class="loading-spinner"></div>
    </div>
    <form id="mergeForm">
        <div class="form-group wide-field">
            <label for="gitUrl">
                <span class="required">*</span>
                Git URL：
                <span class="tooltip">?</span>
                <span class="tooltipText">请输入Git仓库的完整URL地址。</span>
            </label>
            <input type="text" id="gitUrl" name="gitUrl" placeholder="请输入Git仓库地址" value="https://gitee.com/Quasdomo/smart-campus.git">
        </div>
        <div class="form-group">
            <label for="gitAccount">
                <span class="required">*</span>
                Git账号：
                <span class="tooltip">?</span>
                <span class="tooltipText">请输入用于访问Git仓库的账号。</span>
            </label>
            <input type="text" id="gitAccount" name="gitAccount" placeholder="请输入Git账号">
        </div>
        <div class="form-group">
            <label for="gitPassword">Git密码：
                <span class="tooltip">?</span>
                <span class="tooltipText">请输入Git密码，可直接录入或通过系统参数获取（建议：防止泄露，请配置系统参数：key为Git_P，值为密钥）</span>
            </label>
            <input type="password" id="gitPassword" name="gitPassword" placeholder="请输入Git密码">
        </div>
        <div class="form-group wide-field">
            <label for="branchName">
                <span class="required">*</span>
                分支名称：
                <span class="tooltip">?</span>
                <span class="tooltipText">请选择要操作的Git分支，可点击“获取列表”按钮获取可用分支。</span>
            </label>
            <div class="branch-group">
                <select id="branchName" name="branchName" style="width: 60%;">
                    <option value="">请选择分支</option>
                </select>
                <button type="button" onclick="fetchBranches()">获取列表</button>
            </div>
        </div>
        <div class="form-group wide-field">
            <label for="deploymentPath">
                <span class="required">*</span>
                部署包输出路径：
                <span class="tooltip">?</span>
                <span class="tooltipText">请输入打包后部署包的输出路径，打包后的部署包会存放在此路径下。比如：D:/deployment/smart-campus/。</span>
            </label>
            <input type="text" id="deploymentPath" name="deploymentPath" placeholder="请输入部署包输出路径">
        </div>
        <div class="form-group wide-field">
            <label for="projectPath">
                <span class="required">*</span>
                项目路径：
                <span class="tooltip">?</span>
                <span class="tooltipText">请输入项目在本地资源管理器上的路径，比如项目位置为D:/project/smartCampus，则输入D:/project/smartCampus。</span>
            </label>
            <input type="text" id="projectPath" name="projectPath" placeholder="请输入项目路径">
        </div>
        <div class="form-group">
            <label for="pcProjectName">PC项目名称：
                <span class="tooltip">?</span>
                <span class="tooltipText">请输入PC项目名称，比如：Campus。不输入此值，则表示不打包PC项目。</span>
            </label>
            <input type="text" id="pcProjectName" name="pcProjectName" placeholder="请输入PC项目名称" value="Campus">
        </div>
        <div class="form-group">
            <label for="vueProjectName">Vue项目名称：
                <span class="tooltip">?</span>
                <span class="tooltipText">请输入Vue项目名称，比如：Campus-ui。不输入此值，则表示不打包Vue项目。</span>
            </label>
            <input type="text" id="vueProjectName" name="vueProjectName" placeholder="请输入Vue项目名称" value="Campus-ui">
        </div>
        <div class="form-group">
            <label for="uniAppProjectName">UniApp项目名称：
                <span class="tooltip">?</span>
                <span class="tooltipText">前提：请在环境变量中配置HbuilderX软件安装目录(key为HBuilderX_HOME，值为HbuilderX软件安装目录)
                    <br>请输入UniApp项目名称，比如：Campus-app。不输入此值，则表示不打包uniApp项目。</span>
            </label>
            <input type="text" id="uniAppProjectName" name="uniAppProjectName" placeholder="请输入UniApp项目名称" value="Campus-app">
        </div>
        <div class="form-group">
            <label for="operate">操作类型：
                <span class="tooltip">?</span>
                <span class="tooltipText">请选择要执行的操作类型。</span>
            </label>
            <select id="operate" name="operate">
                <option value="1">合并且打包</option>
                <option value="2">只合并</option>
                <option value="3">只打包</option>
            </select>
        </div>
        <div class="btn-container">
            <button type="button" onclick="submitForm()">提交</button>
            <button type="button" onclick="cancel()">清空</button>
        </div>
    </form>
</body>
<!-- 引入jQuery -->
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script>
    // 页面加载时从 localStorage 读取数据并填充表单。 并获取分支列表
    window.onload = function() {
        const cachedData = localStorage.getItem('mergeFormData');
        if (cachedData) {
            const formData = JSON.parse(cachedData);
            for (const key in formData) {
                if (formData.hasOwnProperty(key)) {
                    $(`#${key}`).val(formData[key]);
                }
            }
        }

        // 获取分支列表
        const gitAccount = $('#gitAccount').val();
        const gitUrl = $('#gitUrl').val();
        if (gitAccount && gitUrl) {
            fetchBranches();
        }

    };

    // 新增方法：将表单数据缓存到浏览器缓存中
    function cacheFormData() {
        const formData = {
            branchName: $('#branchName').val(),
            gitUrl: $('#gitUrl').val(),
            gitAccount: $('#gitAccount').val(),
            gitPassword: $('#gitPassword').val(),
            deploymentPath: $('#deploymentPath').val(),
            projectPath: $('#projectPath').val(),
            pcProjectName: $('#pcProjectName').val(),
            vueProjectName: $('#vueProjectName').val(),
            uniAppProjectName: $('#uniAppProjectName').val(),
            operate: $('#operate').val()
        };
        localStorage.setItem('mergeFormData', JSON.stringify(formData));
    }

    function fetchBranches() {
        const gitAccount = $('#gitAccount').val();
        const gitPassword = $('#gitPassword').val();
        const gitUrl = $('#gitUrl').val();
        const formData = {
            gitUrl: gitUrl,
            gitAccount: gitAccount,
            gitPassword: gitPassword
        };

        // if (!gitAccount || !gitUrl) {
        //     alert('请填写Git账号、和URL');
        //     return;
        // }

        $.ajax({
            url: '/api/getBranches',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(response) {
                if (response.code === 200) {
                    //console.log(response);
                    let branches = response.data;
                    let options = '';
                    Object.keys(branches).forEach(key => {
                        options += `<option value="${key}">${branches[key]}</option>`;
                    });
                    $('#branchName').html(options);
                } else {
                    alert('获取分支失败: ' + response.msg);
                }
            },
            error: function() {
                alert('请求失败，请检查网络或服务器状态');
            }
        });
    }

    function submitForm() {
        // 调用新增方法缓存表单数据
        cacheFormData();

        // 显示加载遮罩层
        const loadingOverlay = document.querySelector('.loading-overlay');
        loadingOverlay.style.display = 'flex';

        const formData = {
            branchName: $('#branchName').val(),
            gitUrl: $('#gitUrl').val(),
            gitAccount: $('#gitAccount').val(),
            gitPassword: $('#gitPassword').val(),
            deploymentPath: $('#deploymentPath').val(),
            projectPath: $('#projectPath').val(),
            pcProjectName: $('#pcProjectName').val(),
            vueProjectName: $('#vueProjectName').val(),
            uniAppProjectName: $('#uniAppProjectName').val(),
            operate: $('#operate').val()
        };

        $.ajax({
            url: '/api/auto/merge',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(response) {
                alert(response.msg);
                // 隐藏加载遮罩层
                loadingOverlay.style.display = 'none';
            },
            error: function() {
                alert('请求失败，请检查网络或服务器状态');
                // 隐藏加载遮罩层
                loadingOverlay.style.display = 'none';
            }
        });
    }

    function cancel() {
        $('#mergeForm')[0].reset();
        // 清空缓存
        localStorage.removeItem('mergeFormData');
    }
</script>



